<template>
  <div>
    <div class="head">任务计划列表</div>
    <div class="content">
      <div class="content-top">
        <span>添加任务</span><br />
        <el-input
          placeholder="例如：吃饭睡觉打豆豆；提示：回车即可添加任务"
          v-model="text.data"
          @keyup.enter.native="Task"
        ></el-input>
      </div>
      <div class="content-mid">
        <span class="title">{{ NotDoneArr.length }}个任务未完成</span>
        <span>
          <el-button @click="AllTask">所有任务</el-button>
          <el-button @click="NotDoneTask">未完成的任务</el-button>
          <el-button @click="DoneTask">完成的任务</el-button></span
        >
      </div>
      <div class="content-bm">
        <span>任务列表</span><br />
        <el-input
          type="text"
          placeholder="还没有添加人任何任务"
          v-if="AllDoneArr.length === 0"
        ></el-input>
        <div v-show="AllFlag">
          <p v-for="(item, index) in AllDoneArr" :key="index" class="TaskList">
            <input type="checkbox" @click="change(item)" />
            <span
              v-show="!item.flag"
              @dblclick="changeShow(item.flag, index)"
              >{{ item.data }}</span
            >
            <input
              v-show="item.flag"
              v-model="item.data"
              @keyup.enter="save(item)"
              @keyup.esc="Cancel(item)"
            />
            <el-button @click="DelTask(item, index)" class="deltask"
              >移除该任务</el-button
            >
            <el-divider></el-divider>
          </p>
        </div>
        <div v-show="DoneFlag">
          <span
            v-show="DoneArr.length === 0 && AllDoneArr.length !== 0"
            class="hard"
            >还没有完成的任务哦，继续加油</span
          >
          <p v-for="(item, index) in DoneArr" :key="index" class="TaskList">
            <span>{{ item.data }}</span>
            <el-divider></el-divider>
          </p>
        </div>
        <div v-show="NotDoneFlag">
          <span
            v-show="NotDoneArr.length === 0 && AllDoneArr.length !== 0"
            class="hard"
            >任务都完成了，你真棒！！！</span
          >
          <p v-for="(item, index) in NotDoneArr" :key="index" class="TaskList">
            <span>{{ item.data }}</span>
            <el-divider></el-divider>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: { data: "", flag: false, isDone: false },
      AllFlag: true,
      DoneFlag: false,
      NotDoneFlag: false,
      DoneArr: [],
      NotDoneArr: [],
      AllDoneArr: [],
    };
  },
  methods: {
    Task() {
      if (this.text.data && !this.AllDoneArr.includes(this.text)) {
        this.AllDoneArr.push(this.text);
        this.NotDoneArr.push(this.text);
        localStorage.setItem("text", JSON.stringify(this.AllDoneArr));
      }
      this.text = { data: "", flag: false };
    },
    change(item) {
      if (!item.isDone) {
        this.NotDoneArr.splice(item, 1);
        this.DoneArr.push(item);
        item.isDone = !item.isDone;
      } else {
        this.NotDoneArr.push(item);
        this.DoneArr.splice(item, 1);
        item.isDone = !item.isDone;
      }
      console.log(item);
    },
    AllTask() {
      console.log(1);
      this.AllFlag = true;
      this.DoneFlag = false;
      this.NotDoneFlag = false;
    },
    NotDoneTask() {
      console.log(2);
      this.AllFlag = false;
      this.DoneFlag = false;
      this.NotDoneFlag = true;
    },
    DoneTask() {
      console.log(3);
      this.AllFlag = false;
      this.DoneFlag = true;
      this.NotDoneFlag = false;
    },
    DelTask(item, index) {
      this.AllDoneArr.splice(index, 1);
      this.NotDoneArr.splice(index, 1);
      console.log(item, index);
    },
    changeShow(a, b) {
      console.log(a, b);
      this.AllDoneArr[b].flag = true;
    },
    save(item) {
      console.log(1);
      console.log(item);
      item.flag = !item.flag;
    },
    Cancel(item) {
      // item.flag = !item.flag;
    },
  },
  created() {
    console.log(1);
  },
};
</script>

<style lang="sass" scoped>
.head
  height: 40px
  width: 100%
  background-color: red
  font-size: 20px
  line-height: 40px
  color: #fff
  font-weight: 700
.content-top
  input
    width: 400px
    outline: none
.content-mid
  display: flex
  justify-content: space-between
.title
  font-size: 14px
  color: red
.deltask
  float: right
.hard
  font-size: 14px
  color: red
</style>